import { Theme } from "globals.slint";
import { TimerConfig, TimerConfigPage } from "timerconfig.slint";
import { AboutPage } from "about.slint";
import { ThemePage } from "themeconfig.slint";
import { ConfigPage } from "config.slint";
import { ToolTip, TTPosition } from "tooltip.slint";

component BottomBarIcon inherits Rectangle {
    in-out property <bool> active;
    out property<bool> hover: bbi-ta.has-hover;
    callback activate;

    Rectangle {
        padding: 0px;
        slct := Rectangle {
            height: 1px;
            width: parent.width;
            y: parent.height - 1px;
            background: Theme.accent;

            animate width, x {
                duration: 150ms;
            }
        }
        @children
    }

    bbi-ta := TouchArea {
        clicked => {
            root.activate();
        }
    }

    animate background {
        duration: 150ms;
    }

    states [
        hvr-act when bbi-ta.has-hover && root.active: {
            background: Theme.background.brighter(0.3);
            slct.width: self.width * 0.333;
            slct.x: 0px + (self.width * 0.333);
        }
        hvr-nt-act when bbi-ta.has-hover && !root.active: {
            background: Theme.background.brighter(0.3);
            slct.width: 0px;
            slct.x: self.width / 2;
        }
        nt-hvr-act when !bbi-ta.has-hover && root.active: {
            background: Theme.background;
            slct.width: self.width * 0.333;
            slct.x: 0px + (self.width * 0.333);
        }
        nt-hvr-nt-act when !bbi-ta.has-hover && !root.active: {
            background: Theme.background;
            slct.width: 0px;
            slct.x: self.width / 2;
        }
    ]
}

component BottomBar inherits Rectangle {
    width: 100%;
    height: 35px;
    background: Theme.background;
    out property<int> active-page: 0;
    //out property<int> hovered-tab: 0;

    Rectangle {
        for btn-info[idx] in [
            { page-icon: @image-url("../assets/icons/clock.svg"), tooltip: "Timer Configuraiton" },
            { page-icon: @image-url("../assets/icons/gear.svg"), tooltip: "Options" },
            { page-icon: @image-url("../assets/icons/pallette.svg"), tooltip: "Themes" },
            { page-icon: @image-url("../assets/icons/info.svg"), tooltip: "About" },
        ] : BottomBarIcon {
            y: 0px;
            x: self.width * idx;
            height: 35px;
            width: parent.width / 4;
            active: root.active-page == idx;

            icon := Image {
                colorize: Theme.background-lightest;
                animate colorize {
                    duration: 125ms;
                }
                source: btn-info.page-icon;
                image-fit: contain;
                width: 60%;
                height: 60%;
            }

            activate => {
                root.active-page = idx;
            }
        }
    }
}

export component TabContainer inherits VerticalLayout {
    //my initial attempts to add the logo to the theme weren't working. Passing it all the way through
    //from multiple components feels a bit hacky, but it was a quick way to test the rest of my logic
    //in regartds to updating the SVG and re-applying the logo
    in-out property<image> logo <=> info.logo;

    out property <TimerConfig> tmr-config: clock.config;

    Rectangle {
        clock := TimerConfigPage {
            animate opacity, x {
                duration: 150ms;
                easing: ease-in-out;
            }
            visible: self.opacity > 0%;
        }
        gear := ConfigPage {
            animate opacity, x {
                duration: 150ms;
                easing: ease-in-out;
            }
            visible: self.opacity > 0%;
        }
        pall := ThemePage {
            animate opacity, x {
                duration: 150ms;
                easing: ease-in-out;
            }
            visible: self.opacity > 0%;
        }
        info := AboutPage {
            animate opacity, x {
                duration: 150ms;
                easing: ease-in-out;
            }
            visible: self.opacity > 0%;
        }

        states [
            tab0 when bb.active-page == 0 : {
                clock.opacity: 100%;
                gear.opacity: 0%;
                pall.opacity: 0%;
                info.opacity: 0%;
            }
            tab1 when bb.active-page == 1 : {
                clock.opacity: 0%;
                gear.opacity: 100%;
                pall.opacity: 0%;
                info.opacity: 0%;
            }
            tab2 when bb.active-page == 2 : {
                clock.opacity: 0%;
                gear.opacity: 0%;
                pall.opacity: 100%;
                info.opacity: 0%;
            }
            tab3 when bb.active-page == 3 : {
                clock.opacity: 0%;
                gear.opacity: 0%;
                pall.opacity: 0%;
                info.opacity: 100%;
            }
        ]
    }
    bb := BottomBar {}
    //hmm ideally I want the tooltips here on the Tabcontainer....but I need to get the owner info to show them...how to buble this info up?


    //not sure this is the best way to do it...I feel like I'm duplicating the logic here a bit, but since I can't
    //access the individual elements of the BottomBarIcon's outside of the for loop, I'm not sure how else to do this
    //actually how do I get the hover state to bubble up properly....
    /*for btn-info[idx] in [
        { page-icon: @image-url("../assets/icons/clock.svg"), tooltip: "Timer Configuraiton" },
        { page-icon: @image-url("../assets/icons/gear.svg"), tooltip: "Options" },
        { page-icon: @image-url("../assets/icons/pallette.svg"), tooltip: "Themes" },
        { page-icon: @image-url("../assets/icons/info.svg"), tooltip: "About" },
    ] : ToolTip {
        x: BottomBar.absolute-position.x + (BottomBar.width / 4 * idx);
        y: BottomBar.absolute-position.y;
        owner-height: 35px;
        owner-width: BottomBar.width / 4;
        position: TTPosition.Top;
        show: ??;
        text: btn-info.tooltip;
    }*/
}